<template>
  <div class="users-detail">
    <div class="user-detail-content">
      <a-card :bordered="false">
        <div class="user-base-info flex-between">
          <p><span>李小丽 (53453454435435)</span></p>
          <p>
            <!-- <a-button class="margin-r20">刷新</a-button> -->
            <a-button type="primary" class="passBtn" @click="handleEdit()">
              编辑
            </a-button>
          </p>
        </div>
      </a-card>
      <a-card :bordered="false">
        基本信息
        <div class="margin-t20">
          <a-row>
            <a-col :span="8">
              <p>真实姓名：12121</p>
            </a-col>
            <a-col :span="8">
              <p>身份证号码：12121</p>
            </a-col>
            <a-col :span="8">
              <p>手机号码：12121</p>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <p>注册时间：12121</p>
            </a-col>
            <a-col :span="8">
              <p>推荐人手机：12121</p>
            </a-col>
            <a-col :span="8">
              <p>推荐人名称：12121</p>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <p>是否平台买手：12121</p>
            </a-col>
          </a-row>
        </div>
      </a-card>
      <a-card :bordered="false">
        认证公司信息
        <c-table
          :columns="tableColumns"
          :datas="tableData"
          :loading="loading"
          showPagination
          :paginationDatas="paginationDatas"
          @onPageSizeChange="onPageSizeChange"
          @onShowNumChange="onShowNumChange"
        >
        </c-table>
      </a-card>
    </div>
    <a-drawer
      class="users-drawer"
      title="编辑"
      :width="'30%'"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      @close="handleClose"
      :destroyOnClose="true"
    >
      <c-form-model
        :datas="formData"
        v-model="form"
        :rules="rules"
        ref="formModels"
      >
        <a-date-picker
          slot="registerTime"
          slot-scope="row"
          show-time
          v-model="form[row.tableRow.prop]"
        >
        </a-date-picker>
      </c-form-model>
      <div class="drawer-footer-btn flex-center">
        <a-button class="margin-r10" @click="handleClose"> 取消 </a-button>
        <a-button type="primary" @click="handleOk"> 确定 </a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserList } from "@/api/company/users";

export default {
  name: "users-detail",
  components: {},
  data() {
    return {
      visible: false,
      form: {
        platformType: "0",
        phone: "",
        registerTime: "",
      },
      tableColumns: [
        {
          title: "公司名称",
          dataIndex: "userId",
          width: "100",
        },
        {
          title: "简称",
          dataIndex: "userName",
          width: "100",
        },
        {
          title: "用户身份",
          dataIndex: "userPhone",
        },
        {
          title: "业务方向",
          dataIndex: "companyName",
        },
        {
          title: "有效期",
          dataIndex: "roleName",
          scopedSlots: { customRender: "roleName" },
        },
        {
          title: "账户状态",
          dataIndex: "companyStatus",
          scopedSlots: { customRender: "companyStatus" },
        },
        {
          title: "上次登录时间",
          dataIndex: "lastLoginDate",
          width: "200",
        },
        {
          title: "提交认证时间",
          dataIndex: "createDate",
          width: "200",
        },
      ],
      formData: [
        {
          label: "真实姓名",
          prop: "trueName",
        },
        {
          label: "身份证号",
          prop: "idCard",
        },
        {
          label: "手机号码",
          prop: "phone",
        },
        {
          label: "注册时间",
          prop: "registerTime",
          type: "slot",
        },
        {
          label: "推荐人名称",
          prop: "roleName",
        },
        {
          label: "推荐人手机",
          prop: "roleName",
        },
        {
          label: "是否平台买手",
          prop: "platformType",
          type: "radio",
          typeData: [
            {
              label: "是",
              value: "0",
            },
            {
              label: "否",
              value: "1",
            },
          ],
        },
      ],
      tableData: [],
      paginationDatas: {
        pageSizeOptions: ["10", "20", "30", "40", "50","200","1000"],
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      rules: {
        trueName: [
          { required: true, message: "请输入真实姓名", trigger: "change" },
        ],
        idCard: [
          { required: true, message: "请输入身份证号码", trigger: "change" },
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "change" },
        ],
        registerTime: [
          { required: true, message: "请输入注册时间", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    ...mapState({}),
  },
  created() {
    this.onPageOnlod();
  },
  mounted() {},
  methods: {
    onPageOnlod() {
      this.loading = true;
      getUserList({
        pageData: {
          ...{
            pageSize: this.paginationDatas.pageSize,
            pageNum: this.paginationDatas.pageNum,
          },
        },
      })
        .then((res) => {
          this.tableData = res.data.pageData;
          this.paginationDatas.total = res.data.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onShowNumChange(val) {
      this.paginationDatas.pageNum = val;
      this.onPageOnlod();
    },
    onPageSizeChange(val) {
      this.paginationDatas.pageSize = val;
      this.onPageOnlod();
    },
    handleEdit() {
      this.visible = true;
    },
    handleClose() {
      this.visible = false;
    },
    handleOk() {
      this.$refs.formModels.handleValidate().then((data) => {
      });
    },
  },
};
</script>

<style lang="less" scoped>

::v-deep.ant-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  margin-top: 10px;
}
::v-deep.ant-calendar-picker {
  width: 100%;
}
</style>
